<template>
  <view class="container">
    <cu-custom bgColor="bg-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">新增密码</block>
    </cu-custom>

    <view class="bg-top bg-green">
      <view class="top-box shadow">
        <view class="qh-title text-bold text-blue text-xl u-text-center">
          <text></text>
        </view>

        <view class="cu-list menu">
          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-writefill text-blue margin-right-xs"></text>
              <text class="text-black">密码名称</text>
            </view>
            <view class="action">
              <u-input
                class="text-grey text-sm u-font-20 input-width-400"
                v-model="pass.name"
                placeholder="请输入密码名称"
                type="text"
              ></u-input>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-writefill text-green margin-right-xs"></text>
              <text class="text-black">登录名</text>
            </view>
            <view class="action">
              <u-input
                class="text-grey text-sm u-font-28 input-width-400"
                v-model="pass.username"
                placeholder="请输入登录名"
                type="text"
              ></u-input>
            </view>
          </view>

          <view class="cu-item" style="padding: 0">
            <view class="content">
              <text class="cuIcon-writefill text-red margin-right-xs"></text>
              <text class="text-black">密码</text>
            </view>
            <view class="action">
              <u-input
                class="text-grey text-sm u-font-28 input-width-400"
                v-model="pass.password"
                placeholder="请输入密码"
                type="password"
              ></u-input>
            </view>
          </view>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="padding-lr flex margin-top-sm" style="justify-content: space-between; width: 750rpx">
        <button class="saveRecord" :style="[inputStyle]" @tap="add" style="width: 100%">保存记录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pass: {
        name: '',
        username: '',
        password: ''
      }
    }
  },
  computed: {
    inputStyle() {
      let style = {}
      if (this.pass.name && this.pass.username && this.pass.password) {
        style.color = '#fff'
        style.backgroundColor = this.$u.color['success']
      }
      return style
    }
  },
  methods: {
    /**
     * 保存
     */
    async add() {
      // 校验
      if (!this.pass.name) {
        return
      }
      if (!this.pass.username) {
        return
      }
      if (!this.pass.password) {
        return
      }

      const res = await this.$u.api.addPass(this.pass)
      this.$u.toast('新增成功，正在为您跳转记录列表')

      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
          success: function () {
            uni.$emit('refreshPassPage')
          }
        })
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 750rpx;
  color: #333333;

  .bg-top {
    margin-top: -1rpx;
    width: 750rpx;
    height: 220rpx;
    padding-top: 50rpx;
    border-radius: 0 0 20% 20%;

    .top-box {
      width: 700rpx;
      background-color: #ffffff;
      margin: 0 auto;
      border-radius: 20rpx;
      padding: 20rpx 30rpx 0rpx;
      position: relative;

      .qh-title {
        width: 100%;
        height: 60rpx;
        line-height: 65rpx;
      }
    }
  }

  .saveRecord {
    background-color: #dbf1e1;
    color: $u-tips-color;
    border: none;
    border-radius: 10px;
    font-size: 30rpx;

    &::after {
      border: none;
    }
  }
}

.category-subsection {
  width: 250rpx;
}

.input-width-400 {
  width: 400rpx;
}
</style>
